import React from "react";
import MonacoEditor from 'react-monaco-editor';
import { Button, Modal, Input } from "antd";
import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import "./index.less";

interface ICodeEditorProps {
  language: string;
  onChange: (code: any) => void;
  default?: any;
  value?: any;
  height?: number;
  isFunction?: boolean;     // 针对写函数体得codeEditor
  functionName?: string;    // 函数名
  functionParams?: string;  // 函数参数
  [key: string]: any;
}
interface ICodeEditorState {
  code: string;
  visibleFullCode: boolean;
}
export default class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorState> {
  constructor(props: ICodeEditorProps) {
    super(props);
    this.state = {
      code: this.initCodeValue(),
      visibleFullCode: false
    }
  }
  initCodeValue = () => {
    const defaultValue = this.props.value || this.props.default;
    if (!defaultValue) return "";
    return typeof defaultValue === "string" ? defaultValue : JSON.stringify(defaultValue, null, 4)
  }
  changeHandler = (code) => {
    const { onChange } = this.props;
    try {
      code = JSON.parse(code);
    } catch { }
    onChange && onChange(code);
  }
  shouldComponentUpdate(nextProps: ICodeEditorProps) {
    if (nextProps.value !== this.props.value || nextProps.default !== this.props.default) {
      this.setState({ code: JSON.stringify(nextProps.value || nextProps.default, null, 4) || "" });
    }
    return true;
  }
  render() {
    const { language, height, isFunction, functionName, functionParams } = this.props;
    const { code, visibleFullCode } = this.state;
    return <div className="visbar-gui-code-editor">
      {isFunction && <Input disabled={true} value={`function ${functionName}(${functionParams}){`} />}
      <div className="code-editor-area">
        <MonacoEditor
          width="100%"
          height={height || 176}
          language={language}
          theme="vs-dark"
          value={code}
          options={{ lineNumbers: "off", minimap: { enabled: false } }}
          onChange={(code) => this.setState({ code })}
        />
        <div className="operate-btn">
          <FullscreenOutlined className="expend-icon" onClick={() => this.setState({ visibleFullCode: true })} />
          <Button type="primary" size="small" onClick={() => this.changeHandler(code)}>保存</Button>
          <Button type="default" size="small" onClick={() => this.setState({ code: "" })}>取消</Button>
        </div>
      </div>
      { isFunction && <Input disabled={true} value={"}"} /> }
      <Modal
        title={null}
        footer={null}
        visible={visibleFullCode}
        centered={true}
        width={"90%"}
        closable={false}
        className="full-screen-modal"
      >
        <MonacoEditor
          width="100%"
          height={document.body.clientHeight - 100 || 660}
          language={language}
          theme="vs-dark"
          value={code}
          options={{ lineNumbers: "off", minimap: { enabled: true } }}
          onChange={(code) => this.setState({ code })}
        />
        <FullscreenExitOutlined className="close-icon" onClick={() => this.setState({ visibleFullCode: false })} />
      </Modal>
    </div>
  }
}